<template xmlns:el-col="http://www.w3.org/1999/html">
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">

            <el-form :inline="true" :model="filters" ref="filters" size="medium">
                <el-form-item prop="customer_full_name">
                    <el-input placeholder="客户姓名/企业名称" v-model.trim="filters.customer_full_name"></el-input>
                </el-form-item>
                <el-form-item prop="customer_identity_no">
                    <el-input placeholder="证件号/营业执照号" v-model.trim="filters.customer_identity_no"></el-input>
                </el-form-item>
                <el-form-item prop="sale_name">
                    <el-input placeholder="销售姓名" v-model.trim="filters.sale_name"></el-input>
                </el-form-item>
                <el-form-item label="" prop="sale_department_id">
                    <el-select clearable placeholder="部门" @change="changeDepartmenty" v-model="filters.sale_department_id" @clear="clearGroup">
                        <el-option :key="item.id" :label="item.department_name" :value="item.id" v-for="item in departmentTree" ></el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item label="" prop="sale_team_id">
                    <el-select clearable placeholder="组别" v-model="filters.sale_team_id">
                        <el-option :key="item.id" :label="item.team_name" :value="item.id" v-for="item in teamTree" ></el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item label="" prop="state">
                    <el-select clearable placeholder="合同状态" v-model="filters.state">
                        <el-option :key="value" :label="txt" :value="value" v-for="(txt,value) in options.state" ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item prop="no">
                    <el-input placeholder="合同编号" v-model.trim="filters.no"></el-input>
                </el-form-item>

                <el-form-item prop="date_range">
                    <div class="block">
                        <el-date-picker :clearable="clearable" v-model="filters.date_range" type="daterange" @change="getDateChange"
                                        start-placeholder="合同生效日" end-placeholder="合同生效日" placeholder="请选择合同生效日范围"
                                        value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="type">
                    <el-select clearable placeholder="合同类型" v-model="filters.type">
                        <el-option :key="value" :label="txt" :value="value" v-for="(txt,value) in options.type" ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="searchList" size="small">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetSearch('filters')" size="small">清空</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="exportExcel" size="small">导出</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addItem">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--数据列表-->
        <el-table :data="items" stripe v-loading="listLoading" style="width: 100%" tooltip-effect="dark">
            <el-table-column width="100" prop="no" label="合同编号">
                <template slot-scope="scope">
                    <el-button  type="text" @click="showDetail(scope.row.id)">
                        <span>{{ scope.row.no}}</span>
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="amount" label="合同金额(元)" :formatter="amountFormatter"></el-table-column>
            <el-table-column prop="type" label="合同类型" :formatter="typeFormatter"></el-table-column>
            <el-table-column prop="product_name" label="产品名称"></el-table-column>
            <el-table-column prop="customer_full_name" label="客户姓名/企业名称"></el-table-column>
            <el-table-column prop="customer_identity_no" label="证件号/执照号" show-overflow-tooltip></el-table-column>

            <el-table-column prop="sale_name" label="销售姓名"></el-table-column>
            <el-table-column prop="sale_department_name" label="部门"></el-table-column>
            <el-table-column prop="term_start" label="合同生效日"></el-table-column>
            <el-table-column prop="state" label="合同状态" :formatter="stateFormatter"></el-table-column>

            <el-table-column align="center" label="操作" width="160px">
                <template slot-scope="scope" v-if="scope.row.state == 1 || scope.row.state == 3  ">
                    <el-button @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-button @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <!--分页-->
            <el-pagination style="text-align: center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pager.page_size"
                           :page-sizes="pager.sizes" background :current-page="pager.page_no" layout="prev,pager,next,sizes,total" :total="pager.total">
            </el-pagination>
        </el-col>




    </section>
</template>
<script>
    import * as sale_api from '../../api/sale_api';
    import * as contract_api from '../../api/contract_api';
    import dict from '../../common/js/dict';
    import * as date from "../../common/js/date";
    import * as commons from '../../common/js/commons';
    import {fileDownload} from '../../common/js/download';

    export default {
        props: ["params"],
        data() {
            return {
                listLoading: false,
                options: {
                    customer_type: dict.contract_customer_type,
                    state: dict.contract_state,
                    type: dict.contract_search_type
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_no: 1
                },
                items: [],
                filters: {
                    "customer_full_name": "",
                    "customer_identity_no": "",
                    "sale_name": "",
                    "state": "",
                    "no": "",
                    "sale_department_id": "",
                    // "sale_team_id": "",

                    "date_range": "",
                    "start_time":"",
                    "end_time":"",
                },
                clearable: false,       //查询条件，日期不可删除
                //部门/组
                companyTree: '',
                departmentTree:'',
                teamTree:'',
                tree_data:'',
            }
        },
        methods: {
            typeFormatter(row, column) {
                return dict.contract_type[row[column.property]];
            },
            stateFormatter(row, column) {
                return dict.contract_state[row[column.property]];
            },
            getDateChange(val){
                this.filters.start_time = val[0];
                this.filters.end_time = val[1];
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_no = 1;
                this.pager.page_size = val;
                this.getItems();
            },
            //page_no
            handleCurrentChange(val) {
                this.pager.page_no = val;
                this.getItems();
            },
            searchList(){
                this.pager.page_no = 1;
                this.getItems();
            },
            //查询列表
            getItems() {
                this.listLoading = true;
                let condition = {
                    start_date: date.dateStart(this.filters.start_time),
                    end_date: date.dateEnd(this.filters.end_time),
                    customer_full_name: this.filters.customer_full_name,
                    customer_identity_no: this.filters.customer_identity_no,
                    sale_name: this.filters.sale_name,
                    state: this.filters.state,
                    no: this.filters.no,
                    sale_department_id: this.filters.sale_department_id,
                    type: this.filters.type
                };
                let params = {
                    page_size: this.pager.page_size,
                    page_no: this.pager.page_no,
                    condition: condition
                };

                contract_api.contractList(params).then((res) => {
                    if (res.data.status === 200) {
                        let datas = JSON.parse(res.data.datas);
                        this.items = datas.items;
                        this.pager.total = datas.total;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        else{this.$message.error(" "+res.data.msg);}
                    }

                    this.listLoading = false;
                });
            },
            exportExcel() {
                let condition = {
                    start_date: this.filters.start_time,
                    end_date: this.filters.end_time,
                    customer_full_name: this.filters.customer_full_name,
                    customer_identity_no: this.filters.customer_identity_no,
                    sale_name: this.filters.sale_name,
                    state: this.filters.state,
                    no: this.filters.no,
                    sale_department_id: this.filters.sale_department_id,
                    type: this.filters.type
                };
                contract_api.contractExport(condition).then((res) => {
                    if (res.status == 200) {
                        fileDownload(res, this);
                    } else {
                        if (res.data.status == 401) {
                            // this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                }).catch((e) => {
                    this.$message({
                        type: 'info',
                        message: e.message
                    });
                });
            },
            resetDialogData() {       //重置 表单
                this.dialog.dialogFormVisible = false;
                this.dialog.dialogData = {};
            },
            //清空查询条件，页面恢复显示两日内数据
            resetSearch(formName) {
                this.$refs[formName].resetFields();
                this.filters.date_range = '';
                this.searchList();
                this.teamTree = "";
            },
            //部门/组联动
            initTreeData() {     //从 服务器获取数据
                sale_api.getDepartmentList().then((res) => {
                    if(res.data.status == 200){
                        let raw_tree_list = JSON.parse(res.data.datas);

                        if(raw_tree_list){
                            this.tree_data = raw_tree_list;
                            this.companyTree = raw_tree_list.children;
                            this.departmentTree = commons.getnewjson(this.companyTree);
                        }
                    }else{
                        if(res.data.status == 401){
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.status+" "+res.data.msg);
                    }
                });
            },
            changeDepartmenty(val){
                this.filters.team_id = "";
                for(var j = 0,len= this.departmentTree.length; j < len; j++) {
                    let department = this.departmentTree[j];

                    if(department.id==val){
                        if(department.children){
                            this.teamTree = department.children;
                            this.filters.group = '';
                        }else {
                            this.teamTree ='';
                        }
                    }
                }
            },clearGroup(){
                this.teamTree = "";
            },
            amountFormatter(row, column) {
                var amount = row[column.property]/100;
                return commons.formatNum(amount);
            },
            showDetail(iid) {
                this.$router.push({path: '/contract/detail/' + iid });
            },
            addItem() {
                this.$router.push({path: '/contract/add'});
            },
            handleEdit(iid) {
                this.$router.push({path: '/contract/edit/' + iid});
            },
            handleDelete(iid) {
                let that = this;
                this.$confirm('此操作将永久该合同, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    contract_api.contractRemove({"id": iid}).then((res) => {
                        if (res.data.status === 200) {
                            this.getItems();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'info',
                                message: result.msg
                            });
                        }
                    });

                });
            }
        },
        mounted() {
            this.$nextTick(function () {
                //初始化部门和组
                this.initTreeData();
                this.getItems();
            })
        }
    }
</script>

<style lang="scss">
    .el-button {
        margin: 4px !important
    }
    .el-table .cell
    {
        padding-left:5px!important;
        padding-right:5px!important;
    }
</style>